<template>
  <div>
    <div class="index-page" @touchstart="hideway()">
      <!--<myheader></myheader>-->
      <myswiper :listImg="imgs" :Swiper="swiper"></myswiper>
      <div class="link">
        <router-link to="/import" @click="">
          <img src="../assets/img/import.png" width="29">
          <span>原产地进口</span>
        </router-link>
        <a href="http://www.finewest.cn/store_goods_index.htm?gc_id=66172&is_a=1">
          <img src="../assets/img/spot-goods.png" width="29">
          <span>保税仓现货</span>
        </a>
        <a href="http://www.finewest.cn/channel.htm">
          <img src="../assets/img/channel.png" width="29">
          <span>产区频道</span>
        </a>
        <!--<a href="http://www.finewest.cn/sales.htm">
          <img src="../assets/img/promotions.png" width="29">
          <span>特价</span>
        </a>-->
        <!--<a href="http://www.finewest.cn/fw_cal.htm">
          <img src="../assets/img/calc.png" width="29">
          <span>进口计算器</span>
        </a>-->
        <router-link to="/calculate">
          <img src="../assets/img/calc.png" width="29">
          <span>进口计算器</span>
        </router-link>
        <router-link to="/f-ma">
          <img src="../assets/img/kuajing.png" width="29">
          <span>跨境直购</span>
        </router-link>
      </div>
      <mytopic :info="topics[3]"></mytopic>
      <myoriginal :hasHeader="login"></myoriginal>
      <mytopic :info="topics[2]"></mytopic>
      <myqualityWine :wineList="wines"></myqualityWine>
      <!-- <mytopic :info="topics[0]" class="today-recommend"></mytopic>
      <myrecommend :recom="recommends" :Swiper="swiper" :hasHeader="login"></myrecommend> -->
      <!--<mytopic :info="topics[1]"></mytopic>-->
      <!--<mypromotion :pro="promotions" :sure="login" :Swiper="swiper" :hasHeader="login"></mypromotion>-->
      <!-- <mytopic :info="topics[3]"></mytopic>
      <myoriginal :hasHeader="login"></myoriginal> -->
      <mytopic :info="topics[4]"></mytopic>
      <mytopselling :tops="topselling"></mytopselling>
      <mytopic :info="topics[7]"></mytopic>
      <mytianjiu :pro="tianjiu" :sure="login" :Swiper="swiper" :hasHeader="login"></mytianjiu>
      <mytopic :info="topics[8]"></mytopic>
      <mytoday-origin :wineList="todayOrigin"></mytoday-origin>
      <mytopic :info="topics[5]"></mytopic>
      <myagent :onlyagent="agents"></myagent>
      <mytopic :info="topics[6]"></mytopic>
      <myscenery :scenery="origins"></myscenery>
      <model ref="hideModel">
        <div v-if="wayInContact === 'fineWestPhone'" class="phone-way">
          <p class="phone-number">全球服务热线： +8628 8598 0909</p>
          <p class="play-operate"><span @click="closeModel()">确定</span><a href="tel:+8628 8598 0909">拨号</a></p>
        </div>
        <div v-else class="wechar-way">
          <div class="we-char">
            <img src="../assets/picture/finewestWechar.png" width="131" height="131">
          </div>
          <p @click="closeModel()">确定</p>
        </div>
      </model>
    </div>
    <levitation ref="childway" @upupGo="showWhat"></levitation>
    <myfooter/>
    <!--<router-view></router-view>-->
  </div>
</template>

<script>
  import Swiper from '../../static/swiper'
  import '../plugins/swiper/swiper.css'

  import myheader from '@/components/header'
  import mytopic from '@/components/topic'
  import myswiper from '@/components/swiperLoop'
  import myrecommend from '@/components/recommend'
  import mytianjiu from '@/components/tianjiu'
  import mypromotion from '@/components/promotions'
  import mytodayOrigin from '@/components/todayOrigin'
  import myqualityWine from '@/components/qualityWine'
  import myoriginal from '@/components/original'
  import mytopselling from '@/components/topselling'
  import myagent from '@/components/agent'
  import myscenery from '@/components/scenery'
  import levitation from '@/components/levitation'
  import model from '@/components/model.vue'
  import myfooter from '@/components/footer'

  /* import we from '../assets/img/loop1.png'
  import we2 from '../assets/img/loop2.png'
  import coo from '../assets/img/loop3.png' */
  import know from '../assets/picture/know.png'
  export default {
    name: 'index',
    components: {
      myheader,
      myfooter,
      mytopic,
      myswiper,
      myrecommend,
      mypromotion,
      mytianjiu,
      mytodayOrigin,
      myqualityWine,
      myoriginal,
      mytopselling,
      myagent,
      myscenery,
      levitation,
      model
    },
    data () {
      return {
        login: '',
        url: 'http://www.finewest.cn',
        swiper: Swiper,
        topics: [
          {title: '今日推荐', caption: '各产区最新推荐产品', show: false},
          {title: '特价', caption: '特价促销', link: false},
          {title: '精选酒单', caption: '倾力推荐各产区好酒', show: true, link: true, outLink: 'http://www.finewest.cn/group.htm'},
          {title: '今日名庄', caption: '特价，稀缺', show: true, link: false, inLink: '/originals'},
          {title: '酒评家推荐榜', caption: '搜罗国际酒评家，一手酒评发布', show: true, link: false, inLink: '/recommend-top'},
          {title: '独家代理', caption: '”一城一代“独家合作', show: true, link: true, outLink: 'http://www.finewest.cn/brand.htm'},
          {title: '产区掠影', caption: '', show: false},
          {title: '甜酒榜', caption: '', show: true, link: false, inLink: '/sweet-wine'},
          {title: '今日酒庄', caption: '', link: false}
        ],
        imgs: [
          {list: require('../assets/picture/banner_1.png'), link: 'http://www.finewest.cn/group.htm'},
          {list: require('../assets/picture/apply.png'), link: 'http://www.finewest.cn/wine-fund/index.html#/apply'},
          {list: require('../assets/picture/swiper-banner.png'), link: 'http://www.finewest.cn/t/view.htm?id=1'},
          {list: know, link: 'about-finewest'}
          /* {list: we, link: 'http://www.finewest.cn/channel_detail.htm?cq=0'},
          {list: we2, link: 'http://www.finewest.cn/channel_detail.htm?cq=0'},
          {list: coo, link: 'http://www.finewest.cn/channel_detail.htm?cq=0'} */
        ],
        recommends: [],
        promotions: [],
        wines: [],
        topselling: [],
        agents: [],
        origins: [],
        wayInContact: '',
        pageScrollTop: '',
        title: '主页',
        tianjiu: '',
        todayOrigin: ''
      }
    },
    created: function () {
      this.hasLogin()
      this.changeRecommends()
      this.changePromotions()
      this.changeWines()
      this.changeTopselling()
      this.changeAgent()
      this.changeOrigins()
      this.changeTianjiu()
      this.changeTodayOrigin()
    },
    methods: {
      showWhat (msg) {
        this.wayInContact = msg
        this.pageScrollTop = document.body.scrollTop || document.documentElement.scrollTop
        document.documentElement.style.cssText += '; height: 100%; overflow: hidden;'
        document.body.style.cssText += '; height: auto; overflow: hidden;'
        // document.getElementsByClassName('index-page')[0].style.cssText += '; position: absolute; top: -' + this.pageScrollTop + 'px;'
        // console.log(document.getElementsByClassName('index-page')[0].style.top)
        window.addEventListener('touchmove', this.$utils.prevent, false)
      },
      closeModel () {
        document.documentElement.style.cssText += '; height: auto; overflow: auto;'
        document.body.style.cssText += '; height: auto; overflow: auto;'
        // document.getElementsByClassName('index-page')[0].style.cssText += '; position: absolute; overflow: auto;'
        // document.getElementsByClassName('index-page')[0].style.scrollTop = -this.pageScrollTop + 'px'
        window.removeEventListener('touchmove', this.$utils.prevent, false)
        this.$refs.hideModel.hideContactWay()
      },
      hideway () {
        this.$refs.childway.changehide()
      },
      hasLogin () {
        this.login = this.$utils.getCookie('USER_NAME')
      },
      changeRecommends () {
        this.$http({
          method: 'post',
          url: this.url + '/m/today_recom.htm',
          headers: {},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.recommends = response.data
        }, function () {
          console.log('获取数据失败')
        })
      },
      changePromotions () {
        this.$http({
          method: 'post',
          url: this.url + '/m/tejiaList.htm',
          headers: {},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.promotions = response.data
        }, function (response) {
          console.log(response)
        })
      },
      changeWines () {
        this.$http({
          method: 'post',
          url: this.url + '/m/jiudan.htm',
          headers: {},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.wines = response.data
        }, function (response) {
          console.log(response)
        })
      },
      changeTopselling () {
        this.$http({
          method: 'post',
          url: this.url + '/m/bangs.htm',
          headers: {},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.topselling = response.data
        }, function (response) {
          console.log(response)
        })
      },
      changeAgent () {
        this.$http({
          method: 'post',
          url: this.url + '/m/brands.htm',
          headers: {},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.agents = response.data
        }, function (response) {
          console.log(response)
        })
      },
      changeOrigins () {
        this.$http({
          method: 'post',
          url: this.url + '/m/ly.htm',
          headers: {},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.origins = response.data
        }, function (response) {
          console.log(response)
        })
      },
      changeTianjiu () {
        this.$http({
          method: 'post',
          url: this.url + '/m/goods_tb_list.htm',
          headers: {},
          body: {'size': 4},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.tianjiu = response.data
        }, function (response) {
          console.log(response)
        })
      },
      changeTodayOrigin () {
        this.$http({
          method: 'get',
          url: this.url + '/m/brands.htm?hot=true',
          headers: {},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.todayOrigin = response.data
        }, function (response) {
          console.log(response)
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  .index-page{
    background-color: #f5f5f5;
    font-family: PingFang-SC-Regular;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
  }
  .link{
    $font-color: #e92d46;
    width: 100%;
    height: 86px;
    border-bottom: 1px solid #bbbbbb;
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
    a{
      display: table;
      width: 20%;
      float: left;
      text-align: center;
      height: 100%;
      color: $font-color;
    img{
      width: 29px;
      height: 29px;
      display: table;
      margin: 16px auto 7px;
    }
    }
  }
  .topic.today-recommend{
    border: none;
    margin-bottom: 4px;
  }
</style>
